◀ Work

Weather Check

A React.js weather app

Coding • Front-end development • Graphic design

Technology 🤖


The challenge

To design and code a weather app using React.js

The outcome

Weather Check, a weather app that provides current weather forecast of different cities around the world. The app uses the Open Weather API.

Project developed for

SheCodes React Workshop

How it began 🎬

The last SheCodes Workshop I took in 2020 was the SheCodes React where the framework React.js was taught. Like the other SheCodes Workshops, a final coding project was part of the course. In this one, I had to create a weather app that uses the React framework.

The design process ⏳

Before starting to code, I made a quick sketch of how the app would look like. I decided to change a bit the design of the previous weather app I did before. Moreover, in this project, I created my own background images for the app. I opted for a simple mountain scenery with different colour schemes for different times of the day. The weather icons used in the app were sourced from an NPM (react-animated-weather).

Quick sketch of weather app

Quick sketch of weather app

Weather App background images

Weather App background images

The Outcome 📸

Weather Check is a weather app with the following features:

  • Current weather forecast 3-hour forecast of a location (using API)
  • Search location button
  • Conversion of current temperature in different units (Celsius and Fahrenheit)
  • Background changes based on the current time of the location shown

View Weather App

Personal learnings 🌱

This was my first app using React.js framework and learning about it was quite interesting. I can see the benefits of using this framework, especially to keep the codes simple and neat. I encountered some difficulties when learning about React for the first time however, with the support of the SheCodes videos and the team who are ready to help, I was able to overcome these.

The SheCodes React Workshop was my last workshop of my journey at SheCodes. I am proud of what I was able to achieve and learn throughout this journey. For me the biggest challenge was not to learn how to code but to make the decision of taking my coding journey seriously and giving my time and effort. Finishing the workshops is not the end and I know it. There are still a lot to learn when it comes to coding and I cannot wait to see what other coding projects will come in the future!

Acknowledgement 🎊

Thank you Matt and the SheCodes Team for being part of my coding journey!

I acknowledge Gadigal of the Eora nation on the lands where I am residing and working. I pay my respects to Elders past, present and emerging and celebrate the diversity of Aboriginal peoples and their ongoing cultures and connections to the lands and waters of NSW.